<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="page-view-size" content="1280*720">
  <link rel="stylesheet" href="styles/base.css">
  <style>
    body {
      position: absolute;
      margin: 0;
      padding: 0;
      width: 1280px;
      height: 720px;
      background: url() no-repeat;
      background-color: transparent;
    }

    /* 播放条、标题背景 */
    #bg-shadow {
      position: absolute;
      display: none;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background-image: url(images/controls/bg-shadow.png);
    }

    #bg-shadow .title {
      position: absolute;
      top: 30px;
      right: 50px;
      left: 50px;
      font-size: 30px;
      color: #fff;
    }

    #bg-shadow.show {
      display: block;
    }

    #bg-shadow.show.up .progress-bar {
      display: none;
    }

    /* 提示 */
    #tips {
      position: absolute;
      width: 450px;
      height: 50px;
      background: url(images/controls/tips.png?v=1);
      left: 50%;
      top: 580px;
      margin-left: -225px;
    }

    /* 时长进度条 */
    .progress-bar {
      position: absolute;
      z-index: 100;
      top: 660px;
      left: 175px;
      width: 930px;
      height: 7px;
      background: url(./images/controls/bar-bg.png) repeat;
    }

    /* 播放进度条 */
    .play-progress-bar {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      background: #009cff;
    }


    /* 视频时长 */
    /* 当前播放时间 */
    .duration,
    .currenttime {
      position: absolute;
      top: -17px;
      height: 40px;
      line-height: 40px;
      font-size: 30px;
      color: #fff;
    }

    .duration {
      right: -100px;
    }

    .currenttime {
      left: -100px;
    }

    #play-list {
      position: absolute;
      right: -360px;
      z-index: 1000;
      top: 0;
      bottom: 0;
      width: 360px;
      background: url(images/controls/vod-play-list-bg.png?v=2) repeat;
    }

    #list-view {
      position: absolute;
      top: 60px;
      bottom: 60px;
      left: 0px;
      right: 0px;
      overflow: hidden;
    }

    #list-container .table {
      margin-bottom: 20px;
      width: 100%;
      height: 60px;
      display: table;
      table-layout: fixed;
    }

    #list-container .played .status {
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url(images/controls/playing.gif);
      margin-right: 5px;
    }

    #list-container .active {
      background: #009cff;
    }

    #list-container .cell {
      display: table-cell;
      padding: 10px 30px;
      height: 60px;
      vertical-align: middle;
    }

    .charge {
      font-size: 16px;
      margin: 5px 3px 0;
      padding: 2px 3px;
      background: red;
      color: #fff;
    }

    #list-container .text {
      overflow: hidden;
      line-height: 30px;
      font-size: 22px;
      max-height: 60px;
      color: #fff;
    }


    #pause {
      position: absolute;
      z-index: 100;
      display: none;
      width: 114px;
      height: 114px;
      left: 50%;
      top: 50%;
      background: url(images/controls/play.png);
      margin-top: -57px;
      margin-left: -57px;
    }

    #mute {
      position: absolute;
      right: 50px;
      top: 50px;
      z-index: 1000;
      display: none;
    }

    #volume {
      position: absolute;
      top: 50%;
      right: 50px;
      margin-top: -100px;
      height: 100px;
      width: 10px;
    }

    #volume-bar {
      position: absolute;
      width: 100%;
      bottom: 0;
      height: 100%;
      background: #fff;
    }

    #volume img {
      position: absolute;
      width: 32px;
      height: 32px;
      bottom: -40px;
      left: -10px;
    }
  </style>
</head>

<body onload="init()">
  <div id="test"></div>
  <div id="tips"></div>
  <div id="pause"></div>
  <div id="mute">
    <img src="images/controls/mute.png" alt="">
  </div>
  <div id="bg-shadow">
    <div class="title" id="title"></div>
    <div class="progress-bar">
      <!-- 播放状态 -->
      <div class="play-flag" id="status"></div>
      <!-- 播放进度条 -->
      <div class="play-progress-bar" id="play-progress-bar"></div>
      <!-- 当前播放时间 -->
      <div class="currenttime" id="currenttime">00:00</div>
      <!-- 视频时长 -->
      <div class="duration" id="duration">00:00</div>
    </div>

  </div>

  <div id="volume" style="display: none;">
    <div id="volume-bar"></div>
    <img src="images/controls/volum.png" alt="">
  </div>

  <div id="play-list">
    <div id="list-view">
      <div id="list-container" style="position: relative;">

      </div>
    </div>
  </div>
</body>
<script src="js/jquery.js"></script>
<script src="config/index.js?v=1"></script>
<script src="api/index.js?v=1"></script>
<script src="js/KeyEvent.js?v=12"></script>
<script src="js/event.js?v=1"></script>
<script src="js/utli.js?v=12"></script>
<script src="js/base.js"></script>

<script>
  var videos = null;
  var playTimer = null;
  var durationTimer = null;
  var shadeTimer = null;
  var listTimer = null;
  var vodPlayUrl = '';
  var mp = null;
  var startTime = new Date().getTime();
  // var videoIndex = 0; // 当前播放的视频索引
  // var focusIndex = 0; // 聚焦索引
  var ListPanel = false; // 播放列表状态
  var shadeStatus = false; // 背景的状态
  var playermode = 'normal'; // 播放状态，默认:播放
  var lockTimer = null;
  var current = 0;
  var duration = 0;
  var domain = getDomain().domain;


  function getPreFocus() {
    var url = window.location.href;
    vodid = GY.getURLParameter("VODID", url) != "" ? GY.getURLParameter(
      "VODID", url) : '';
    focusIndex = videoIndex = parseInt(GY.getURLParameter("VIDEO_INDEX", url) != "" ? GY.getURLParameter(
      "VIDEO_INDEX", url) : 0);
  }


  function init() {
    getPreFocus();
    getVideoList();
    showTips();
  }

  function getVideoList() {
    detail = getVodDetailInfo({
      VODID: vodid
    });
    filmDate = playFilmData({
      mediaCode: detail.code
    });
    isSub = filmDate.forwardJson.isSub;
    addPlayHistory(detail.ID, detail.name)
    videos = detail.sitcomList;
    renderPlayList();
    getPlayUrl(videos[videoIndex]);
  }


  var mute = 100;
  var volumeTimer = null;

  function keyMute() {
    var volume = mp.getVolume();
    // 有声音
    if (volume > 0) {
      mute = volume;
      changeVolume(0);
    } else if (volume == 0) {
      changeVolume(mute);
    }
  }

  function changeVolume(volume) {
    clearTimeout(volumeTimer);
    if (!mp) {
      return
    }
    $('#volume').css('display', 'block');
    if (volume > 100) {
      volume = 100;
    } else if (volume <= 0) {
      volume = 0;
    }
    var src = volume == 0 ? 'images/controls/mute.png' : 'images/controls/volum.png';
    $('#volume img').attr('src', src);
    mp.setVolume(volume);
    $('#volume-bar').css('height', volume + '%');
    volumeTimer = setTimeout(function () {
      $('#volume').css('display', 'none');
    }, 3000);
  };

  function volumeUp() {
    var volume = mp.getVolume();
    volume += 10;
    changeVolume(volume);
  }

  function volumeDown() {
    var volume = mp.getVolume();
    volume -= 10;
    changeVolume(volume);
  }

  function renderPlayList() {
    var html = '';
    for (var i = 0; i < videos.length; i++) {
      var chargeHtml = '';
      if (videos[i].charge == 0) {
        chargeHtml = '<span class="charge">免费</span>'
      }
      html += '<div class="item table">' +
        '<div class="cell">' +
        '<div class="text"><div class="status"></div>' + chargeHtml + videos[i].name + '</div>' +
        '</div>' +
        '</div>'
    }
    $('#list-container').html(html);
    checkIndex(videoIndex);
    checkPlayIndex(focusIndex);
  }


  function initMediaPlay() {
    if (mp) {
      destroy()
    }
    mp = new MediaPlayer();
    var instanceId = mp.getNativePlayerInstanceID();
    var playListFlag = 0;
    var videoDisplayMode = 1;
    var height = 720;
    var width = 1280;
    var left = 0;
    var top = 0;
    var muteFlag = 0;
    var useNativeUIFlag = 1;
    var subtitleFlag = 0;
    var videoAlpha = 0;
    var cycleFlag = 0;
    var randomFlag = 0;
    var autoDelFlag = 0;
    var mediaStr = '[{mediaUrl:"' + vodPlayUrl + '",' +
      'mediaCode: "jsoncode1",' +
      'mediaType:2,' +
      'audioType:1,' +
      'videoType:1,' +
      'streamType:1,' +
      'drmType:1,' +
      'fingerPrint:0,' +
      'copyProtection:1,' +
      'allowTrickmode:1,' +
      'startTime:0,' +
      'endTime:20000,' +
      'entryID:"jsonentry1"}]';



    mp.initMediaPlayer(instanceId, playListFlag, videoDisplayMode, height, width, left, top, muteFlag, useNativeUIFlag,
      subtitleFlag, videoAlpha, cycleFlag, randomFlag, autoDelFlag);

    mp.setSingleMedia(mediaStr); //设置媒体播放器播放媒体内容
    mp.setAllowTrickmodeFlag(0); //设置是否允许trick操作。 0:允许 1：不允许
    mp.setNativeUIFlag(0); //播放器是否显示缺省的Native UI，  0:允许 1：不允许
    mp.setAudioTrackUIFlag(1); //设置音轨的本地UI显示标志 0:不允许 1：允许
    mp.setMuteUIFlag(1); //设置静音的本地UI显示标志 0:不允许 1：允许
    mp.setAudioVolumeUIFlag(1); //设置音量调节本地UI的显示标志 0:不允许 1：允许
    mp.setCycleFlag(1); //这句神奇的代码用于解决电视剧连续播放的问题
    mp.refreshVideoDisplay();
  };



  function destroy() {
    if (!mp) return;
    var nativePlayerInstanceID = mp.getNativePlayerInstanceID();
    mp.stop();
    mp.releaseMediaPlayer(nativePlayerInstanceID)
  }


  function getPlayUrl(obj) {
    var url = domain + '/datajsp/play_getVodPlayUrl.jsp?mediaCode=' + obj.code;
    $.get(url, function (data) {
      var data = eval('(' + data + ')');
      if (data.playUrl) {
        vodPlayUrl = data.playUrl
        initMediaPlay();
        duration = 0;
        play();
        $('#title').html(obj.name);
        $('#pause').css('display', 'none');
      }
    })
  }

  // 播放视频
  function play() {
    clearInterval(playTimer)
    clearTimeout(durationTimer)
    $('#currenttime').html('00:00');
    $('#play-progress-bar').css('width', 0)
    mp.playByTime(1, 0);
    showShadow();
    // durationTimer = setTimeout(function () {


    playTimer = setInterval(function () {
      duration = mp.getMediaDuration();
      current = parseInt(mp.getCurrentPlayTime());
      $('#duration').html(formatTime(duration).minute);
      $('#currenttime').html(formatTime(current).minute);
      var width = (current / duration) * 930;
      if (width >= 930) {
        width = 930;
      }
      $('#play-progress-bar').animate({
        'width': width
      }, 0.2);
    }, 100);

    // }, 2000)
  }


  // 显示提示面板
  function showTips() {
    setTimeout(function () {
      $('#tips').css('display', 'none');
    }, 1000 * 3)
  }


  // 显示控制面板
  function showShadow(up) {
    clearTimeout(shadeTimer);
    if (ListPanel) {
      hideList();
    }
    // if (!up) {
    //   $('#bg-shadow').addClass('up');
    // }
    $('#bg-shadow').addClass('show');
    shadeStatus = true;
    shadeTimer = setTimeout(function () {
      hideShadow();
      shadeTimer = null
    }, 1000 * 3)
  }

  // 隐藏控制面板
  function hideShadow() {
    clearTimeout(shadeTimer);
    shadeStatus = false;
    $('#bg-shadow').removeClass('show');
  }

  // 显示列表
  function showList() {
    clearTimeout(listTimer);
    if (shadeStatus) {
      hideShadow();
    }
    $('#play-list').stop().animate({
      right: 0
    });
    ListPanel = true;
    listTimer = setTimeout(function () {
      hideList();
      listTimer = null
    }, 1000 * 5)
  }

  // 隐藏列表
  function hideList() {
    clearTimeout(listTimer);
    var w = $('#play-list').width();
    ListPanel = false;
    $('#play-list').stop().animate({
      right: -w
    });

  }

  // 播放下一个视频
  function next(flag) {
    if (lockTimer) return;
    lockTimer = setTimeout(function () {
      clearTimeout(lockTimer)
      lockTimer = null;
    }, 1000);
    var form = PANDA_PATH + 'vod-play.html?VODID=' + vodid + '&VIDEO_INDEX=' + videoIndex;
    if (videos.length > 1 || flag) {
      endTime = new Date().getTime();
      getLog({
        programId: videos[videoIndex].ID,
        programName: videos[videoIndex].name,
        ctype: '2',
        account: USERID,
        usermac: MAC,
        startTime: startTime,
        endTime: endTime,
        platform: '1'
      })
      startTime = new Date().getTime();
      videoIndex++;
      videoIndex = videoIndex % videos.length;

      if (videos[videoIndex].charge != 0 && isSub != 0) {
        destroy();
        GY.addUrl(PANDA_PATH + 'order-list.html?vodId=' + vodid + '&mediaCode=' + detail.code + '&returnUrl=' +
          escape(form));
        return;
      }

      checkPlayIndex(videoIndex);
      checkIndex(focusIndex = videoIndex)
      getPlayUrl(videos[videoIndex]);
    }
  }

  // 播放上一个视频
  function prev() {
    if (lockTimer) return;
    lockTimer = setTimeout(function () {
      clearTimeout(lockTimer);
      lockTimer = null;
    }, 1000);
    var form = PANDA_PATH + 'vod-play.html?VODID=' + vodid + '&VIDEO_INDEX=' + videoIndex;
    if (videos.length > 1) {
      endTime = new Date().getTime();
      getLog({
        programId: videos[videoIndex].ID,
        programName: videos[videoIndex].name,
        ctype: '2',
        account: USERID,
        usermac: MAC,
        startTime: startTime,
        endTime: endTime,
        platform: '1'
      })
      startTime = new Date().getTime();
      videoIndex = videoIndex > 0 ? --videoIndex : videos.length - 1
      if (videos[videoIndex].charge != 0 && isSub != 0) {
        GY.addUrl(PANDA_PATH + 'order-list.html?vodId=' + vodid + '&mediaCode=' + detail.code + '&returnUrl=' + escape(
          form));
      }
      checkPlayIndex(videoIndex)
      checkIndex(focusIndex = videoIndex)
      getPlayUrl(videos[videoIndex]);
    }
  }

  // 根据索引播放视频
  function playByIndex(index) {
    if (lock) return
    lock = true;
    var form = PANDA_PATH + 'vod-play.html?VODID=' + vodid + '&VIDEO_INDEX=' + videoIndex;
    endTime = new Date().getTime();
    getLog({
      programId: videos[videoIndex].ID,
      programName: videos[videoIndex].name,
      ctype: '2',
      account: USERID,
      usermac: MAC,
      startTime: startTime,
      endTime: endTime,
      platform: '1'
    })
    startTime = new Date().getTime();
    videoIndex = index;
    if (videos[videoIndex].charge != 0 && isSub != 0) {
      GY.addUrl(PANDA_PATH + 'order-list.html?vodId=' + vodid + '&mediaCode=' + detail.code + '&returnUrl=' + escape(
        form));
    }

    checkIndex(focusIndex)
    checkPlayIndex(videoIndex)
    getPlayUrl(videos[videoIndex]);
  }



  /* 
  格式化时间
  params time（视频时长s）
  return hh:mm:ss
  */
  function formatTime(time) {
    var time = parseInt(time || 0);
    // debugger
    var h = parseInt(time / 3600);
    if (h < 10) {
      h = '0' + h;
    }

    var m = parseInt((time % 3600) / 60);
    if (m < 10) {
      m = '0' + m;
    }

    var s = time % 60;
    if (s < 10) {
      s = '0' + s;
    }
    return {
      minute: m + ':' + s,
      clock: h + ':' + m + ':' + s
    };
  }

  function checkIndex(index) {
    clearTimeout(listTimer)
    $('#list-container .item').eq(index).addClass('active').siblings('.item').removeClass('active');
    conputeScroll(index)
  }

  function checkPlayIndex(index) {
    $('#list-container .item').eq(index).addClass('played').siblings('.item').removeClass('played');
  }


  function pause() {
    mp.pause();
  }


  function keyUp() {
    if (ListPanel) {
      if (focusIndex > 0) {
        focusIndex--;
        checkIndex(focusIndex)
      }
      clearTimeout(listTimer)
      showList();
    } else {
      prev();
    }
  }

  function keyDown() {
    if (ListPanel) {
      if (focusIndex < (videos.length - 1)) {
        focusIndex++;
        checkIndex(focusIndex);
      }
      clearTimeout(listTimer)
      showList();
    } else {
      next();
    }
  }

  function keyLeft() {
    // console.error(forwardOrRewindNum)
    if (!ListPanel) {
      showList();
    } else {
      if (duration > 300) {
        forwardOrRewind(-10)
      }
    }
  }

  function keyRight() {
    if (ListPanel) {
      hideList();
    } else {
      if (duration > 300) {
        forwardOrRewind(10)
      }
    }
  }


  function forwardOrRewind(len) {
    if (len > 0) {
      showShadow(true)
    }
    mp.pause();
    var currentTime = parseInt(mp.getCurrentPlayTime()) + len;
    if (currentTime >= duration) {
      currentTime = duration;
      mp.gotoEnd();
    } else if (currentTime <= 0) {
      currentTime = 0
    }
    var width = parseInt((currentTime / duration) * 930);
    if (width >= 930) {
      width = 930;
    }
    $('#play-progress-bar').css('width', width);
    mp.playByTime(1, currentTime);
  }




  // 计算左侧的偏移量
  function conputeScroll(index) {
    var len = videos.length;
    var _diff = 6;
    if (len < _diff) return;
    var ave = Math.floor(_diff / 2);
    var height = 100;
    if (index < ave) {
      $('#list-container').css('top', 0);
    } else if (index > (len - ave)) {
      $('#list-container').css('top', -(len - _diff) * height)
    } else {
      $('#list-container').css('top', -(index - ave) * height)
    }
  }


  function keyBack() {
    endTime = new Date().getTime();
    getLog({
      programId: videos[videoIndex].ID,
      programName: videos[videoIndex].name,
      ctype: '2',
      account: USERID,
      usermac: MAC,
      startTime: startTime,
      endTime: endTime,
      platform: '1'
    })
    destroy();
    GY.goback();
  }

  function keyEnter() {
    if (ListPanel) {
      if (videoIndex != focusIndex) {
        playByIndex(focusIndex);
      }
    } else {
      // var mode = (eval('(' + mp.getPlaybackMode() + ')').PlayMode).replace(/\s+/g, '');;
      if ('normal' == playermode) {
        mp.pause();
        playermode = 'pause'
        $('#pause').css('display', 'block')
      } else if ('pause' == playermode) {
        mp.resume();
        playermode = 'normal'
        $('#pause').css('display', 'none')
      }
      showShadow(true);
      // mp.pause();
    }
    // pause();
  }

  function goUtility() {
    next(true);
  }

  function exit() {
    destroy();
  }
</script>

</html>